<template>
  <chart :options="opts" :width="width" :height="height"></chart>
</template>

<script>
import UA from 'ua-device'

let ua = new UA(navigator.userAgent)

let animation = true

if (ua.browser.name === 'Internet Explorer' || ua.browser.name === 'Safari') {
  animation = false
}

export default {
  name: 'Pie',

  props: ['width', 'height', 'options'],

  computed: {
    opts () {
      let defaultOptions = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: ['50%', '50%']
        },
        series: [{
          name: '',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: []
        }],
        animation: animation
      }
      return _.merge({}, defaultOptions, this.options)
    }
  }
}
</script>

<style lang="css">
</style>
